import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    View,
    Text,
    Easing,
    Animated,
    LayoutAnimation,
    TouchableOpacity
} from 'react-native';
import {tabBarStyle} from '../../styles';
import Icon from 'react-native-vector-icons/Ionicons';

export default class TabBar extends Component {
    // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
        AnimatedValues: this.props.AnimatedValues
        };
    }


    // 1.声明所需要的属性
    static propTypes = {

        /**
         * 框架内帮我们回调
         */
        goToPage: PropTypes.func,// 跳转到对应tab
        activeTab: PropTypes.number,// 当前被选中的Tab下标
        tabs: PropTypes.array, // 所有Tab的集合

        /**
         * 需要自己调用
         */
        tabNames: PropTypes.array, // 保存Tab名称
        tabIconNames: PropTypes.array, // 保存Tab图标
        AnimatedValues: PropTypes.array, //动画默认值
    }

    /**
     * tab切换的时候有动画效果
     */
    setAnimationValue({value}) {
        //console.log(value);
        this.startAnimation(value);
    }

    componentDidMount() {
        // Animated.Value监听范围 [0, tab数量-1]
        this.props.scrollValue.addListener(this.setAnimationValue.bind(this));
    }

    startAnimation(key) {
        this.state.AnimatedValues[key].setValue(1.1);     
        Animated.spring(this.state.AnimatedValues[key],
            {
                toValue: 0.9,                       
                friction: 1,                         
            }
        ).start();
    }
    /**
     * 生成Tab
     * i标识哪个Tab
     */
    renderTabOption(tab, i) {
        const color = this.props.activeTab == i? "#3d9ccc" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色
        return (
          <TouchableOpacity key={i} onPress={()=>this.props.goToPage(i)} style={tabBarStyle.tab} activeOpacity={1}>
              <View style={tabBarStyle.item}>
                <Animated.View
                    style={{transform:[
                        {scale: this.state.AnimatedValues[i]}
                      ]}}>
                  <Icon
                      name={this.props.tabIconNames[i]}  // 图标
                      size={27}
                      color={color}/>
                </Animated.View>
                  <Text style={{color: color,fontSize:12}}>
                      {this.props.tabNames[i]}
                  </Text>
              </View>
          </TouchableOpacity>
         );
      }

      render() {
        return (
          <View style={tabBarStyle.tabs}>
              {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
          </View>
        );
      }

      
}

// export let tabBarStyle = StyleSheet.create({
    
//         container: {
//             flexDirection: 'column',
//             height: 50,
//         },
    
//         tabs: {
//             flexDirection: 'row',
//         },
    
//         tab: {
//             flex: 1,
//             justifyContent: 'center',
//             alignItems: 'center',
//         },
    
//         item: {
//             flexDirection: 'column',
//             alignItems: 'center',
//         }
//     })
